<template>
  <div class="layout">
    <div class="flex-one hot-image">
      <image mode="widthFix" :style="{ 'height': px2rpx(res.data.height) + 'px' }" :src="res.data.list[0].img" alt="">
      </image>
      <image v-for="(area, index) in res.data.list[0].zoneInfo" :key="index" @click="modelNavigateTo({ url: area })"
        mode="widthFix" class="hot-area" :style="{
          left: area.leftPer * 100 + '%',
          top: area.topPer * 100 + '%',
          width: area.widthPer * 100 + '%',
          height: area.heightPer * 100 + '%',
        }" :src="area.img"></image>
    </div>
  </div>
</template>
<script setup lang="ts">
import { px2rpx } from './px2rpx';
import { modelNavigateTo } from "./tpl-v3";

const props = defineProps(['res'])
</script>
<style lang="scss" scoped>
img,
image {
  display: block !important;
}

.hot-image {
  position: relative;
}

.hot-area {
  position: absolute;
  z-index: 99;
}

.flex-one {
  width: 100%;
  display: block;
  overflow: hidden;

  image {
    width: 100%;

    // height: 100%;
  }
}
</style>
